<template>
  <div class="address-select clearfix">
    <!-- 省 -->
    <el-select v-model='formData.province_code' :disabled="readonly" placeholder='请选择省' value="" @change="handleChangeProvince">
      <el-option v-for='item in provinceList' :key='item.code' :label="item.name" :value='item.code'>
      </el-option>
    </el-select>

    <!-- 市 -->
    <el-select v-model='formData.city_code' :disabled="readonly" placeholder='请选择市' value="" @change="handleChangeCity">
      <el-option v-for='item in cityList' :key='item.code' :label="item.name" :value='item.code'>
      </el-option>
    </el-select>

    <!-- 区/县 -->
    <template v-if="!hideCounty">
      <el-select v-model='formData.county_code' :disabled="readonly" placeholder='请选择区/县' value="">
        <el-option v-for='item in countyList' :key='item.code' :label="item.name" :value='item.code'>
        </el-option>
      </el-select>
    </template>

    <!-- 详细地址 -->
    <template v-if="!hideAddress">
      <el-input v-model="formData.address" :readonly="readonly" class="address-select-detail" placeholder='请填写详细地址'/>
    </template>
  </div>
</template>

<script lang="ts" setup>

import { onMounted, reactive, ref, watch } from 'vue';
import addressList, { AddressData } from '@/utils/address.ts';

const props = defineProps({
  provinceCode: Number, // 省Code
  cityCode: Number,     // 市Code
  countyCode: Number,   // 区/县Code
  address: String,      // 地区地址
  fullAddress: String,  // 完整详细地址
  readonly: {
    type: Boolean,
    default: false
  },
  hideCounty: {
    type: Boolean,
    default: false
  },
  hideAddress: {
    type: Boolean,
    default: true
  },
  autoSelect: {
    type: Boolean,
    default: true
  }
});

const formData = reactive({
  province_code: props.provinceCode,
  city_code: props.cityCode,
  county_code: props.countyCode,
  address: props.address,
  full_address: props.fullAddress
});

/** 监听数据 */
const emit = defineEmits(['change']);
watch(formData, () => {
  handleFullAddress();
  emit('change', formData);
});

onMounted(() => {
  handleClearSelect();
});

const provinceList = ref<AddressData[]>([]);
const cityList = ref<AddressData[]>([]);
const countyList = ref<AddressData[]>([]);

/** 初始化数据 */
const initData = () => {
  provinceList.value = addressList;
  // 如果有省编码
  if (props.provinceCode) {
    // 初始化 市级列表
    cityList.value = provinceList.value.find(it => it.code === props.provinceCode)?.children || [];
    // 如果不显示区县 或 没有市编码
    if (props.hideCounty || !props.cityCode) return;
    // 初始化 县级列表
    countyList.value = cityList.value.find(it => it.code === props.cityCode)?.children || [];
  }
};

/** 省改变触发 */
const handleChangeProvince = (code) => {
  // 重置 市 区/县 数据
  formData.city_code = undefined;
  formData.county_code = undefined;

  cityList.value = provinceList.value.find(it => it.code == code)?.children || [];
  countyList.value = [];
  if (cityList.value && cityList.value.length > 0 && props.autoSelect) {
    formData.city_code = cityList.value[0].code;
    updateCountyCode(formData.city_code);
  }
};

/** 市改变触发 */
const handleChangeCity = (code) => {
  updateCountyCode(code);
};

/** 更新区县信息 */
const updateCountyCode = (cityCode: number) => {
  if (cityCode < 1 || props.hideCounty) return;
  countyList.value = cityList.value.find(it => it.code == cityCode)?.children || [];
  if (countyList.value && countyList.value.length > 0 && props.autoSelect) {
    formData.county_code = countyList.value[0].code;
  }
};

/** 处理完整地址信息 */
const handleFullAddress = () => {
  // 省名称
  let provinceName = '';
  if (formData.province_code > 0) {
    provinceName = provinceList.value.find(item => item.code === formData.province_code)?.name;
  }
  // 市名称
  let cityName = '';
  if (formData.city_code > 0) {
    cityName = cityList.value.find(item => item.code === formData.city_code)?.name;
  }
  // 区县名称
  let countyName = '';
  if (formData.county_code > 0) {
    countyName = countyList.value.find(item => item.code === formData.county_code)?.name;
  }

  let data = [];
  if (provinceName) data.push(provinceName);
  if (cityName) data.push(cityName);
  if (countyName) data.push(countyName);
  if (formData.address) data.push(formData.address);

  // 完整地区名名称
  formData.full_address = data.join(' ');
};

/** 清理数据 */
const handleClearSelect = () => {
  provinceList.value = [];
  cityList.value = [];
  countyList.value = [];

  formData.province_code = props.provinceCode;
  formData.city_code = props.cityCode;
  formData.county_code = props.countyCode;
  formData.address = props.address;

  initData();
};

// 提供对外访问
defineExpose({handleClearSelect});
</script>

<style lang="scss" scoped>
.address-select {
  .address-select-detail {
    margin-top: 0;
    padding-left: 2px;
  }

  @media (min-width: 600px) {
    .address-select-detail {
      margin-top: 6px;
    }
  }

  .el-select {
    min-width: 10rem;
    padding-left: 2px;
    padding-right: 2px;
    width: unset !important;
  }
}
</style>
